<template>
  <div>
    <a-card :bordered="false">
      <div class="table-page-search-wrapper">
        <a-form layout="inline">
          <a-row :gutter="48">
            <a-col :md="8" :sm="24">
              <a-form-item label="搜索学员：">
                <a-input
                  placeholder="搜索学员(回车搜索)"
                  style="width: 80%"
                  v-model="student_name"
                  @pressEnter="studentChange"
                >
                  <a-tooltip slot="suffix" title="请搜索学员">
                    <a-icon type="search" style="color: rgba(0, 0, 0, 0.45)" @click="studentChange" />
                  </a-tooltip>
                </a-input>
              </a-form-item>
            </a-col>
            <a-col :md="8" :sm="24">
              <a-form-item label="创建时间：">
                <a-range-picker style="width: 80%" @change="onChange" />
              </a-form-item>
            </a-col>
            <!-- <a-col :md="8" :sm="24">
              <a-form-item label="入账状态：">
                <a-select allowClear placeholder="请选择入账状态" style="width: 80%">
                  <a-select-option value="1">入账中</a-select-option>
                  <a-select-option value="2">入账成功</a-select-option>
                  <a-select-option value="2">入账失败</a-select-option>
                </a-select>
              </a-form-item>
            </a-col> -->
          </a-row>
        </a-form>
      </div>
      <!-- <a style="cursor: pointer" v-if="advanced" @click="more" id="moreButton">
        收起
        <a-icon type="up"></a-icon>
      </a>
      <a style="cursor: pointer" v-if="!advanced" @click="more" id="moreButton">
        展开
        <a-icon type="down"></a-icon>
      </a> -->
      <div style="padding: 5px 0">
        <a-button @click="handleexportfile">导出</a-button>
      </div>
      <div style="margin:15px 0;">
         <a-alert type="warning" style="border:none;padding: 6px 20px;">
           <span slot="message">
              收款金额 <span style="color: #333;font-weight: 700;">￥{{amount_collected_sum||0}}</span>
              <!-- 入账中 <span style="color: #333;font-weight: 700;">0 </span>笔 
              入账成功<span style="color: #333;font-weight: 700;">6</span>笔 -->
           </span>
         </a-alert>
      </div>
      <s-table
        ref="table"
        size="default"
        rowKey="key"
        :columns="columns"
        :data="loadData"
        style="margin-top: 10px"
        class="user_management_table"
        :pagination="pagination"
        :scroll="{ x: 1500}"
      >
        <span slot="actual_entry" slot-scope="text, record">
          {{ (record.amount_collected - record.service_charge).toFixed(2) }}
        </span>
      </s-table>
    </a-card>
  </div>
</template>

<script>
import { collectionList, collectionExport, collectionSum } from '@/api/schoolWallet'
import { STable } from '@/components'
export default {
  components: { STable },
  data() {
    return {
      amount_collected_sum:undefined,
      pagination: {
        showTotal: (total) => `共${total}条数据`,
      },
      columns: [
        {
          title: '创建时间',
          dataIndex: 'created_at',
          fixed: 'left',
          // scopedSlots: { customRender: 'created_at' },
          width: 150,
        },
        {
          title: '收款金额',
          dataIndex: 'amount_collected',
          // scopedSlots: { customRender: 'created_at' },
          width: 110,
        },
        {
          title: '手续费',
          dataIndex: 'service_charge',
          // scopedSlots: { customRender: 'created_at' },
          width: 110,
        },
        {
          title: '实际入账金额',
          // dataIndex: 'created_at',
          scopedSlots: { customRender: 'actual_entry' },
          width: 110,
        },
        // {
        //   title: '入账状态',
        //   // dataIndex: 'created_at',
        //   // scopedSlots: { customRender: 'created_at' },
        //   width:110
        // },
        {
          title: '学员姓名',
          dataIndex: 'student_name',
          // scopedSlots: { customRender: 'created_at' },
          width: 110,
        },
        {
          title: '手机号',
          dataIndex: 'phone',
          // scopedSlots: { customRender: 'created_at' },
          width: 110,
        },
        {
          title: '商品说明',
          dataIndex: 'explain',
          // scopedSlots: { customRender: 'created_at' },
          width: 150,
          ellipsis: true,
        },
        // {
        //   title: '备注',
        //   // dataIndex: 'created_at',
        //   // scopedSlots: { customRender: 'created_at' },
        //   width:110
        // },
        {
          title: '支付流水号',
          dataIndex: 'out_trade_no',
          fixed:'right',
          // scopedSlots: { customRender: 'created_at' },
          width: 200,
        },
      ],
      student_name: '',
      queryParam: {
        school_id: this.$store.state.user.school,
      },
      loadData: (parameter) => {
        return collectionList(
          Object.assign(parameter, this.queryParam, {
            student_name: this.student_name,
            start_time: this.start_time,
            end_time: this.end_time,
          })
        ).then((res) => {
          return res
        })
      },
      start_time: '',
      end_time: '',
    }
  },
  // watch:{
  //   student_name: {
  //     handler (newName, oldName) {
  //       this.$refs.table.refresh()
  //     },
  //     // immediate:true代表如果在 wacth 里声明了obj之后，就会立即先去执行里面的handler方法，
  //     immediate: false,
  //     deep: true // 开启深度监听，默认是false
  //   },
  // },
  created(){
    this.getMoney()
  },
  methods: {
    getMoney() {
      collectionSum(
        Object.assign(this.queryParam, {
          student_name: this.student_name,
          start_time: this.start_time,
          end_time: this.end_time,
        })
      ).then(res=>{
        this.amount_collected_sum=res.amount_collected_sum
      })
    },
    handleexportfile() {
      collectionExport({
        school_id: this.$store.state.user.school,
        student_name: this.student_name || undefined,
        start_time: this.start_time || undefined,
        end_time: this.end_time || undefined,
      })
        .then((res) => {
          this.$message.success('导出成功')
          window.location.href = res.url.url + res.url.path
          // window.location.href=res.url.url+res.url.path
        })
        .catch((err) => {
          this.$message.error(err.data.message || '导出失败')
        })
    },
    onChange(date, dateString) {
      this.start_time = dateString[0]
      this.end_time = dateString[1]
      this.$refs.table.refresh(true)
      this.this.getMoney()
      console.log(date, dateString)
    },
    studentChange(){
      this.$refs.table.refresh(true)
      this.getMoney()
    }
    // more() {
    //   console.log(11);
    //   this.advanced = !this.advanced
    // },
  },
}
</script>

<style lang="less" scoped>
#moreButton {
  position: absolute;
  top: 34px;
  right: 20px;
}
</style>